<template>
	<div class="page-container">
		<el-collapse class="page-collapse">
			<el-collapse-item  name="1"> 
				<template slot="title"><svg-icon icon-class="search" />&nbsp;条件过滤</template>
				<el-form class="page-searchbar" ref="form" :model="params" label-width="80px" size="mini"  @keyup.enter.native="search()">
					<el-row>
						<el-col :span="6">
							<el-form-item label="用户ID：" :label-width="formLabelWidth" >
								<el-input v-model="params.userId" placeholder="" clearable></el-input>	
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="操作类型：" :label-width="formLabelWidth" >
								<el-select v-model="params.type" class="filter-item"  placeholder="" clearable style="width: 100%;">
									<el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"/>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="操作模块：" :label-width="formLabelWidth" >
								<el-input v-model="params.module" placeholder="" clearable></el-input>	
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="操作内容：" :label-width="formLabelWidth" >
								<el-input v-model="params.content" placeholder="" clearable></el-input>	
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="操作IP：" :label-width="formLabelWidth" >
								<el-input v-model="params.optIp" placeholder="" clearable></el-input>	
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="备注：" :label-width="formLabelWidth" >
								<el-input v-model="params.remark" placeholder="" clearable></el-input>	
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="创建时间：" :label-width="formLabelWidth" >
								<el-date-picker style="width:100%" v-model="createTimeArr"
										@change="createTimeChange" type="daterange" 
										value-format="yyyy-MM-dd" range-separator="-" 
										start-placeholder="开始" end-placeholder="结束" clearable >
								</el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="修改时间：" :label-width="formLabelWidth" >
								<el-date-picker style="width:100%" v-model="modifyTimeArr"
										@change="modifyTimeChange" type="daterange" 
										value-format="yyyy-MM-dd" range-separator="-" 
										start-placeholder="开始" end-placeholder="结束" clearable >
								</el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="状态1-正常2-禁用：" :label-width="formLabelWidth" >
								<el-select v-model="params.status" class="filter-item"  placeholder="" clearable style="width: 100%;">
									<el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"/>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6" style="float: right;">
							<div class="sch_button" >
								<el-button type="success"  size="mini"  @click="search()">查询</el-button>
								<el-button  size="mini"  @click="resetSearch()">清空</el-button>
							</div>
						</el-col>

					</el-row>
				</el-form>
			</el-collapse-item>
		</el-collapse>

		<el-row class="page-optbutton">
			<el-button size="mini" type="success" plain @click="viewRec" >查看</el-button>
			<el-button size="mini" type="primary" plain v-bntPerm="'addRec'" @click="addRec" >添加</el-button>
			<el-button size="mini" type="warning" plain v-bntPerm="'editRec'" @click="editRec" >修改</el-button>
			<el-button size="mini" type="danger" plain v-bntPerm="'deleteRec'" @click="deleteRec" >删除</el-button>
		</el-row>

		<div class="page-listtable">
			<el-table ref="dataTableRef" v-loading="listLoading" 
					:data="list" element-loading-text="列表加载中..."
					border fit highlight-current-row 
					@selection-change="tableSelectionChange"
					@row-click="clickRow" size="small"
					height="660" @sort-change="sortChange">
				<el-table-column type="selection" width="30" align="center" fixed></el-table-column>
				<el-table-column label="序号" align="center" width="50" fixed :render-header="renderHeader" >
					<template slot-scope="scope">{{(params.limit*(params.page-1))+ scope.$index+1 }}</template>
				</el-table-column>
				<el-table-column label="用户ID" min-width="80" prop="userId" v-if="columnIf.userId.visible" align="center" sortable="custom" show-overflow-tooltip >
					<template slot-scope="scope">{{ scope.row.userId }}</template>
				</el-table-column>
				<el-table-column label="操作类型" min-width="80" prop="type" v-if="columnIf.type.visible" align="center" sortable="custom" show-overflow-tooltip >
					<template slot-scope="scope">{{ scope.row.type | typeFilter }}</template>
				</el-table-column>
				<el-table-column label="操作模块" min-width="80" prop="module" v-if="columnIf.module.visible" align="center" sortable="custom" show-overflow-tooltip >
					<template slot-scope="scope">{{ scope.row.module }}</template>
				</el-table-column>
				<el-table-column label="操作内容" min-width="80" prop="content" v-if="columnIf.content.visible" align="center" sortable="custom" show-overflow-tooltip >
					<template slot-scope="scope">{{ scope.row.content }}</template>
				</el-table-column>
				<el-table-column label="操作IP" min-width="80" prop="optIp" v-if="columnIf.optIp.visible" align="center" sortable="custom" show-overflow-tooltip >
					<template slot-scope="scope">{{ scope.row.optIp }}</template>
				</el-table-column>
				<el-table-column label="备注" min-width="80" prop="remark" v-if="columnIf.remark.visible" align="center" sortable="custom" show-overflow-tooltip >
					<template slot-scope="scope">{{ scope.row.remark }}</template>
				</el-table-column>
				<el-table-column label="创建时间" min-width="80" prop="createTime" v-if="columnIf.createTime.visible" align="center" sortable="custom" show-overflow-tooltip >
					<template slot-scope="scope">{{ scope.row.createTime | formatDateFilter('yyyy-MM-dd') }}</template>
				</el-table-column>
				<el-table-column label="修改时间" min-width="80" prop="modifyTime" v-if="columnIf.modifyTime.visible" align="center" sortable="custom" show-overflow-tooltip >
					<template slot-scope="scope">{{ scope.row.modifyTime | formatDateFilter('yyyy-MM-dd') }}</template>
				</el-table-column>
				<el-table-column label="状态1-正常2-禁用" min-width="80" prop="status" v-if="columnIf.status.visible" align="center" sortable="custom" show-overflow-tooltip >
					<template slot-scope="scope">{{ scope.row.status | statusFilter }}</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="page-pagination">
			<el-pagination
				:page-sizes="$store.getters.page_sizes"
				:page-size="params.limit"
				layout="total, sizes, prev, pager, next, jumper,slot"
				:current-page="params.page"
				:total="total"
				@size-change="pageSizeChange"
				@current-change="currentPageChange">
				<el-button type="text"  class="refreshBnt" @click="refresh()">
					<i class="el-icon-refresh">刷新</i>
				</el-button>
			</el-pagination>
		</div>
		<el-dialog  :title="dialogTitle"  
				:visible.sync="sysLogShowDialogVisible" 
				:closeOnClickModal="false"  width="1300px" >
			<sysLogShowDialog :dataObj="selObj" class="page-dialogTabDiv" v-if="sysLogShowDialogVisible" ref="sysLogShowDialogRef" @closeDialog="closeDialog"></sysLogShowDialog>
			<div slot="footer" class="dialog-footer" align="center">
				<el-button @click="sysLogShowDialogVisible = false">关闭</el-button>
			</div>
		</el-dialog>
		<el-dialog  :title="dialogTitle"  v-if="sysLogDialogVisible" 
				:visible.sync="sysLogDialogVisible" 
				:closeOnClickModal="false"  width="1300px" >
			<sysLogDialog :dataObj="selObj" class="page-dialogTabDiv" v-if="sysLogDialogVisible" ref="sysLogDialogRef" @closeDialog="closeDialog"></sysLogDialog>
			<div slot="footer" class="dialog-footer" align="center">
				<el-button type="primary" @click="$refs.sysLogDialogRef.save()" >保存</el-button>
				<el-button @click="sysLogDialogVisible = false">关闭</el-button>
			</div>
		</el-dialog>
		<el-dialog center title="自定义列"  :visible.sync="columnDialogVisible" width="800px" top="10vh" :closeOnClickModal="false">
			<columnDialog :columnIf="columnIf" class="page-dialogTabDiv" ref="columnDialogRef"></columnDialog>
			<div slot="footer" class="dialog-footer" align="center">
				<el-button @click="columnDialogVisible = false">关闭</el-button>
			</div>
		</el-dialog>

	</div>
</template>
<script>
import global_ from "@/utils/GlobalDict";
import {bntPerm,permConfig}  from "@/utils/btnPermissions.js";
import { sysLogList,deleteSysLog } from "@/api/system/sysLog";
import columnDialog from '@/views/layout/columnDialog.vue';
import sysLogShowDialog from '@/views/system/dialog/sysLogShowDialog.vue';
import sysLogDialog from '@/views/system/dialog/sysLogDialog.vue';
export default {
	components: {
		columnDialog,
		sysLogShowDialog,
		sysLogDialog,
	},
	filters: {
	},
	data(){
		return {
			columnIf:{
				userId:{ visible:true, label:'用户ID' },
				type:{ visible:true, label:'操作类型' },
				module:{ visible:true, label:'操作模块' },
				content:{ visible:true, label:'操作内容' },
				optIp:{ visible:true, label:'操作IP' },
				remark:{ visible:true, label:'备注' },
				createTime:{ visible:true, label:'创建时间' },
				modifyTime:{ visible:true, label:'修改时间' },
				status:{ visible:true, label:'状态1-正常2-禁用' },
			},
			formLabelWidth:'130px',
			params:{
				limit:10,
				page:1,
				createTimeStart:null,
				createTimeEnd:null,
				modifyTimeStart:null,
				modifyTimeEnd:null,
			},
			listLoading:true,
			list:[],
			total:0,
			selArr:[],
			selObj:new Object(),
			dialogTitle:'编辑',
			columnDialogVisible:false,
			sysLogShowDialogVisible:false,
			sysLogDialogVisible:false,
			idArr:[],
			createTimeArr:[],
			modifyTimeArr:[],
		}
	},
	methods: {
		createTimeChange(){
			this.params.createTimeStart = this.createTimeArr[0];
			this.params.createTimeEnd = this.createTimeArr[1];
		},
		modifyTimeChange(){
			this.params.modifyTimeStart = this.modifyTimeArr[0];
			this.params.modifyTimeEnd = this.modifyTimeArr[1];
		},
		showColumn(event){
			this.columnDialogVisible = true;
		},
		renderHeader(h,{column}){
			return h(
				'span',[
				h('span', column.label),
				h('i', {
					class:'el-icon-setting',
					style:'color:#409eff;margin-left:5px;',
					on:{
						click:this.showColumn
					}
				}
				)
				],
			);
		},
		sortChange({ column, prop, order }){
			if(column){
				var sortText = column.property;
				if(order=="ascending"){
					sortText+=" asc";
				}else{
					sortText+=" desc";
				}
				this.params.orderByClause=sortText+",modifyTime desc";
				this.params.page=1;
				this.refresh();
			}
		},
		refresh(){
			this.listLoading = true;
			this.getTableList();
		},
		getTableList(){
			sysLogList(this.params).then(response => {
				this.list=response.data.rows;
				this.total= response.data.totalCount;
				this.listLoading=false;
			});
			
		},
		pageSizeChange(pageSize){
			this.params.limit=pageSize;
			this.refresh();
		},
		currentPageChange(currentPage){
			this.params.page=currentPage;
			this.refresh();
		},
		search(){
			this.refresh();
		},
		resetSearch(){
			this.params={};
			this.createTimeArr=[];
			this.modifyTimeArr=[];
			this.params.page=1;
			this.params.limit=10;
			this.refresh();
		},
		tableSelectionChange(s){
			this.selArr=[];
			this.idArr=[];
			for (var i=0;i<s.length;i++){
				this.selArr.push(s[i]);
				this.idArr.push(s[i].id);
			}
		},
		clickRow(row){
			this.$refs.dataTableRef.clearSelection();
			this.$refs.dataTableRef.toggleRowSelection(row);
		},
		isSelectOne(){
			var text = "";
			if(this.selArr.length==1){
				return this.selArr[0];
			}else if(this.selArr.length==0){
				text = "请选择一条数据";
			}else{
				text = "您已选择多条数据！当前操作只能选择一条数据";
			}
			this.$alert(text, '提示', {
				confirmButtonText: '确定',
				callback: action => {}
			});
			return null;
		},
		closeDialog(reload){
			if(reload==1){
				this.getTableList();
			}
			this.columnDialogVisible=false;
			this.sysLogShowDialogVisible=false;
			this.sysLogDialogVisible=false;
		},
		viewRec(){
			var obj = this.isSelectOne();
			if(obj!=null){
				this.dialogTitle="查看";
				this.selObj=obj;
				this.sysLogShowDialogVisible=true;
			}
		},
		addRec(){
			this.selObj={};
			this.dialogTitle="添加";
			this.sysLogDialogVisible=true;
		},
		editRec(){
			var obj = this.isSelectOne();
			if(obj!=null){
				this.dialogTitle="修改";
				this.selObj=Object.assign({},obj);
				this.sysLogDialogVisible=true;
			}
		},
		deleteRec(){
			if(this.idArr.length==0){
				this.$alert('请至少选择一条记录', '提示', {
					confirmButtonText: '确定',
					callback: action => {}
				});
				return;
			}
			this.$confirm('是否删除选中的'+this.idArr.length+'条记录?', '删除', {
				confirmButtonText: '删除',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				var paraObj = new Object();
				paraObj.ids=this.idArr.join(",");
				deleteSysLog(paraObj).then(response => {
					if(response.data.success){
						this.$alert("删除成功", "删除成功", {
							confirmButtonText: '确定',
						});
						this.refresh();
					}else{
						this.$alert("删除失败", "删除失败", {
							confirmButtonText: '确定',
						});
					}
				});
			});
		},
	},
	created() {
		permConfig(this.$route.path);
		this.getTableList();
	}
}
</script>

